<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body {
            width:100%;
            height:100%;
            padding:0;
            margin:0;
        }
        .canvas {
            width:100%;
            height:100%;
            background:#000;
            padding:0;
            margin:0;
            font-size:0;
        }
    </style>
</head>
<body>
    <canvas id="canvas" class="canvas"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var context = canvas.getContext('2d');

        var man = Math.ceil(window.innerHeight / 18);
        var lw = Math.ceil(window.innerWidth / 13);
        var row = new Array(lw),
        position = new Array(lw);
 for (var i = 0; i < lw; i++) {
     row[i] = 0;
     position[i] = Math.ceil(Math.random() * man * 2);
 }
 var bj = 0,
     hgh = 0;
 setInterval(function() {
     showText(context);
 }, 50);
 /*
  *显示字母
  * */
 function showText(ctx) {
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.font = "14px Arial";
     for (var k = 0; k < lw; k++) {
         if (bj >= position[k]) {
             var wz = row[k] - 14 * man;
             var ls = row[k];
             if (wz < window.innerHeight + 2) {
                 for (var j = 0; j < man; j++) {
                     //col[j]=col[j]+14;
                     ls -= 14;
                     if (ls < 0) {
                         break;
                     }
                     ctx.fillStyle = getRandomColor();
                     ctx.fillText(getchar(), k * 14, ls);
                 }
                 row[k] += 14;
             } else {
                 row[k] = 0;
             } //输出完毕
         } //可以更新的元素
     }
     if (bj < man * 2) {
         bj++;
     }
 }
 /*
  * 产生字符
  * */
 function getchar() {
     return String.fromCharCode(65 + Math.ceil(Math.random() * 57));
 }
        /*
        *产生随机颜色
        * */
        function getRandomColor() {
            return '#' + (function(color){
                return (color += '0123456789abcdef'[Math.floor(Math.random() *16)]) &&  color.length !== 6 ? arguments.callee(color) : color
            })('')
        }
        console.log(getRandomColor())
    </script>
</body>
</html>